import React from 'react';
import {
  Table,
  Icon,
  Button,
  Tooltip,
  Row,
  Col,
  Input,
  Select,
  DatePicker,
  Cascader,
  Radio,
  Dropdown,
  Menu,
  Checkbox,
  Steps,
  Modal,
  Form,
  Pagination,
  Popconfirm,
  Timeline,
  Tabs
} from 'antd';
import MyIcon from 'MyIcon/MyIcon';
import AddressSelect from '../../components/common/AddressSelect/AddressSelect';

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const {MonthPicker, RangePicker} = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const TabPane = Tabs.TabPane;

import data from './data';
import AuntInfo from '../auntinfo/index';  //月嫂详情
import AuntAdd from '../auntadd/index';  //新增月嫂


export default class AuntList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowSearch: false,  // 搜索下拉
      Colvisible: false,       // 更改列显示
      Statistics:false,     //查看提示
      //弹窗
      ModalDistribution: false,         //分配
      //右侧滑层
      isShowRightAuntInfo: false,      //月嫂详情
      isShowRightAuntAdd: false,      //月嫂新增
    };
  }

  //搜索下拉
  SearchToggle = (e) => {
    this.setState({
      'isShowSearch': !this.state.isShowSearch,
    })
  }
  //更改列显示
  handleMenuClick = (e) => {
    if (e.key === '3') {
      this.setState({Colvisible: false});
    }
  }
  handleVisibleChange = (flag) => {
    this.setState({Colvisible: flag});
  }
  //弹窗
  //分配
  showModalDistribution(ModalDistribution) {
    this.setState({ModalDistribution});
  }

  //弹窗-end

  //---右侧滑层
  //订单详情
  RightAuntInfo = (e) => {
    this.setState({
      'isShowRightAuntAdd': false,
      'isShowRightAuntInfo': !this.state.isShowRightAuntInfo,
    })
  }
  RightAuntInfoClose = (e) => {
    this.setState({
      'isShowRightAuntInfo': false,
    })
  }
  //右侧滑层-新增订单
  RightAuntAdd = (e) => {
    document.getElementById('Test').scrollTop = 0;
    this.setState({
      'isShowRightAuntInfo': false,
      'isShowRightAuntAdd': true,
    })
  }
  RightAuntAddClose = (e) => {
    this.setState({
      'isShowRightAuntInfo': false,
      'isShowRightAuntAdd': false,
    })
  }
  //查看统计
  Statistics=(e)=>{
    this.setState({
      'Statistics': !this.state.Statistics,
    })
  }
  StatisticsClose=(e)=>{
    this.setState({
      'Statistics': false,
    })
  }

  render() {
    //修改列显示
    const menu = (
      <Menu>
        <Menu.Item key="1">更改级别</Menu.Item>
        <Menu.Item key="2">移入黑名单</Menu.Item>
        <Menu.Item key="3">移出黑名单</Menu.Item>
      </Menu>
    );
    let that = this;
    let auntList = data.auntListTable;
    let {sortedInfo, filteredInfo} = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [
      {
        title: '姓名',
        dataIndex: 'Name',
        key: 'Name',
        fixed: 'left',
        width: 100,
        className: 'ant-table-th-center',
      },
      {
        title: '头像',
        dataIndex: 'Picture',
        key: 'Picture',
        render: (value) => {
          return (
            <a href="javascript:void(0);" onClick={that.RightAuntInfo}>
              <img className="tx" src={value} width="45" height="45" alt="月嫂头像"/>
            </a>
          )
        },
        className: 'ant-table-th-center',
      }, {
        title: '联系方式',
        dataIndex: 'Phone',
        key: 'Phone',
        render: (value) => {
          return (
            <div className="table-contact">
              <Tooltip placement="top" title={value}>
                <span className="phone-span"><MyIcon type="phone"/></span>
              </Tooltip>
              <Tooltip placement="top" title={value}>
                <span className="phone-span"><MyIcon type="qq"/></span>
              </Tooltip>
            </div>
          )
        },
        className: 'ant-table-th-center'
      }, {
        title: '性别',
        dataIndex: 'Sex',
        key: 'Sex',
        className: 'ant-table-th-center'
      }, {
        title: '年龄',
        dataIndex: 'Age',
        key: 'Age',
        className: 'ant-table-th-center'
      }, {
        title: '求职意向',
        dataIndex: 'Job',
        key: 'Job'
      }, {
        title: '婚姻状况',
        dataIndex: 'Marry',
        key: 'Marry',
        className: 'ant-table-th-center',
      }, {
        title: '现居住地',
        dataIndex: 'AddressNow',
        key: 'AddressNow'
      }, {
        title: '最高学历',
        dataIndex: 'Education',
        key: 'Education'
      }, {
        title: '烧饭水平',
        dataIndex: 'Cook',
        key: 'Cook'
      }, {
        title: '身份证号',
        dataIndex: 'IDnumber',
        key: 'IDnumber',
        className: 'ant-table-th-center'
      }, {
        title: '岗位性质',
        dataIndex: 'Postnature',
        key: 'Postnature',
        className: 'ant-table-th-center',
      }, {
        title: '在职状态',
        dataIndex: 'Incumbency',
        key: 'Incumbency',
        className: 'ant-table-th-center',
      }, {
        title: '级别',
        dataIndex: 'Level',
        key: 'Level',
        className: 'ant-table-th-center',
      }, {
        title: '月嫂来源',
        dataIndex: 'Source',
        key: 'Source'
      }, {
        title: '认证状态',
        dataIndex: 'State',
        key: 'State',
        className: 'ant-table-th-center',
      }, {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        //fixed:'right',
        className: 'ant-table-th-center',
        //width:150
      }, {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        fixed: 'right',
        width: 100,
        className: 'ant-table-th-center',
        render: () => {
          return (
            <div className="table-a-cont">
              <a href="javascript:void(0)">编辑</a>
              <a href="javascript:void(0)" onClick={() => this.showModalDistribution(true)}>认证</a>
            </div>
          )
        },
      }, {
        title: '上传',
        dataIndex: 'upfile',
        key: 'upfile',
        fixed: 'right',
        width: 100,
        className: 'ant-table-th-center',
        render: () => {
          return (
              <a className="upfile-link" href="javascript:void(0)">
                <input className="upfile-input" type="file"/>
                上传
              </a>
          )
        },
      }];
    // rowSelection object indicates the need for row selection
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
      },
      getCheckboxProps: record => ({
        //disabled: record.name === 'Disabled User',    // Column configuration not to be checked
      }),
    };
    const pagination = {
      // total: this.state.tDate.length,
      total: 50,
      showSizeChanger: false,
      defaultPageSize:5,
    }
    return (
      <div>
        <h3 className="title-h3">月嫂管理</h3>
        <Tabs defaultActiveKey="1">
          <TabPane tab="全部月嫂" key="1">
            {/*搜索*/}
            <div className="search-cont">
              <Row gutter={16}>
                <Col span="4">
                  <Input placeholder="姓名/手机号/身份证号..." size="large"/>
                </Col>
                <Col span="4">
                  <Select defaultValue="选择服务小类" size="large">
                    <Option value="选择服务小类">选择服务小类</Option>
                  </Select>
                </Col>
                <Col span="4">
                  <Select defaultValue="请选择月嫂级别" size="large">
                    <Option value="请选择月嫂级别">请选择月嫂级别</Option>
                  </Select>
                </Col>
                <Col span="4">
                  <Select defaultValue="请选择月嫂来源" size="large">
                    <Option value="请选择月嫂来源">请选择月嫂来源</Option>
                  </Select>
                </Col>
                <Col span="4">
                  <Select defaultValue="请选择月嫂类型" size="large">
                    <Option value="请选择月嫂类型">请选择月嫂类型</Option>
                  </Select>
                </Col>
                <div className="search-btncont search-btncontfr">
                  <ButtonGroup>
                    <Button size="large" type="primary">搜索</Button>
                    <Button size="large" type="primary" onClick={this.SearchToggle}>
                      <Icon type={this.state.isShowSearch ? 'up' : 'down'}/>
                    </Button>
                  </ButtonGroup>
                </div>
              </Row>
              <div className={this.state.isShowSearch ? 'search-more' : 'search-more dis-n'}>
                <Row gutter={16}>
                  <Col span="4">
                    <AddressSelect  />
                  </Col>
                  <Col span="4">
                    <Select defaultValue="请选择全职或兼职" size="large">
                      <Option value="请选择全职或兼职">请选择全职或兼职</Option>
                      <Option value="全职">全职</Option>
                      <Option value="兼职">兼职</Option>
                    </Select>
                  </Col>
                  <Col span="4">
                    <Select defaultValue="请选择婚姻状况" size="large">
                      <Option value="请选择全职或兼职">请选择全职或兼职</Option>
                      <Option value="全职">全职</Option>
                      <Option value="兼职">兼职</Option>
                    </Select>
                  </Col>
                  <Col span="4">
                    <Select defaultValue="请选择属相" size="large">
                      <Option value="请选择属相">请选择属相</Option>
                    </Select>
                  </Col>
                  <Col span="4">
                    <Select defaultValue="请选择性别" size="large">
                      <Option value="请选择性别">请选择性别</Option>
                    </Select>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span="4">
                    <AddressSelect/>
                  </Col>
                  <Col span="4">
                    <Select defaultValue="请选择在职状态" size="large">
                      <Option value="请选择在职状态">请选择在职状态</Option>
                      <Option value="在职">在职</Option>
                    </Select>
                  </Col>
                  <Col span="4">
                    <DatePicker placeholder="请输入创建时间" size="large"/>
                  </Col>
                  <Col span="4">
                    <Select defaultValue="请选择年龄段" size="large">
                      <Option value="请选择年龄段">请选择年龄段</Option>
                    </Select>
                  </Col>
                  <Col span="4">
                    <Select defaultValue="请选择认证状态" size="large">
                      <Option value="请选择认证状态">请选择认证状态</Option>
                    </Select>
                  </Col>
                </Row>
                <Row gutter={16}>
                  <Col span="4">
                    <Select defaultValue="请选择烧饭水平" size="large">
                      <Option value="请选择烧饭水平">请选择烧饭水平</Option>
                    </Select>
                  </Col>
                  <Col span="4">
                    <Select defaultValue="请选择月嫂学历" size="large">
                      <Option value="请选择月嫂学历">请选择月嫂学历</Option>
                    </Select>
                  </Col>
                </Row>
              </div>
            </div>
            {/*列表按钮*/}
            <div className="search-cont2">
              <ButtonGroup>
                <Button onClick={that.RightAuntAdd}>新增月嫂</Button>
                <Button onClick={that.Statistics}>查看统计</Button>
                <Dropdown overlay={menu} onVisibleChange={this.handleVisibleChange}
                          visible={this.state.Colvisible}>
                  <Button>
                    更改列显示 <Icon type="down"/>
                  </Button>
                </Dropdown>
              </ButtonGroup>
            </div>
            <div className={this.state.Statistics ? 'statistics' : 'statistics dis-n'}>
              <a href="javascript:void(0)" className="statistics-close" onClick={this.StatisticsClose}>
                <Icon type="close-square" />
              </a>
              <Row gutter={16}>
                <Col span={4}>月嫂数量：<span className="num">10000</span></Col>
                <Col span={4}>月嫂数量：<span className="num">10000</span></Col>
                <Col span={4}>月嫂数量：<span className="num">10000</span></Col>
                <Col span={4}>月嫂数量：<span className="num">10000</span></Col>
                <Col span={4}>月嫂数量：<span className="num">10000</span></Col>
                <Col span={4}>月嫂数量：<span className="num">10000</span></Col>
                <Col span={4}>月嫂数量：<span className="num">10000</span></Col>
                <Col span={4}>月嫂数量：<span className="num">10000</span></Col>
              </Row>
            </div>
            {/*表格*/}
            <Table columns={columns} rowSelection={rowSelection} bordered
                   dataSource={auntList.toJS()} bAunted pagination={pagination}
                   scroll={{ x: 1800}}
            />
            {/*月嫂详情*/}
            <div
              className={this.state.isShowRightAuntInfo ? 'rightSlip rightSlip-nofoot animated fadeInRight' : 'rightSlip rightSlip-nofoot animated fadeOutRight'}>
              <a href="javascript:void(0)" className="rightSlipClose"
                 onClick={this.RightAuntInfoClose}><Icon type="close"/></a>
              <AuntInfo />
            </div>
            {/*新增月嫂------有锚点就加 rightSlip-Anchor*/}
            <div
              className={this.state.isShowRightAuntAdd ? 'rightSlip rightSlip-Anchor animated fadeInRight' : 'rightSlip rightSlip-Anchor animated fadeOutRight'}>
              <a href="javascript:void(0)" className="rightSlipClose"
                 onClick={this.RightAuntAddClose}><Icon type="close"/></a>
              <AuntAdd />
            </div>
          </TabPane>
          <TabPane tab="待认证月嫂" key="2">待认证月嫂小金鱼还没写</TabPane>
          <TabPane tab="黑名单" key="3">黑名单小金鱼还没写</TabPane>
        </Tabs>
      </div>
    )
  }
}
